<template>
  <div>
    <Card>
      <div>
        已选中的权限:{{selectedPermissions}}
      </div>
      <Tree :data="historyData" :render="renderContent" class="permission-tree-box"></Tree>
    </Card>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      selectedPermissions: [
        // "p1_view", "p1_1_view"
      ],
      checkedItem: [],
      historyData: [
        {
          title: "后台管理",
          expand: true,
          disableCheckbox: true,
          permissions: [
            { value: "p1_view", text: "浏览", checked: false},
          ],
          children: [
            {
              title: "管理员",
              expand: true,
              permissions: [
                { value: "p1_1_view", text: "浏览", checked: true},
              ],
              children: [
                {
                  title: "用户列表",
                  expand: true,
                  permissions: [
                    { value: "p1_1_1_view", text: "浏览", checked: true},
                    { value: "p1_1_1_create", text: "创建", checked: true},
                    { value: "p1_1_1_update", text: "更新", checked: true},
                    { value: "p1_1_1_remove", text: "删除", checked: true},
                    { value: "p1_1__export", text: "导出", checked: true}
                  ],
                },
                {
                  title: "角色列表",
                  expand: true,
                  permissions: [
                    { value: "p1_1_2_view", text: "浏览", checked: true}
                  ],
                }
              ]
            },
            {
              title: "操作员",
              expand: true,
              permissions: [
                { value: "p1_2_view", text: "浏览", checked: false}
              ],
              children: [
                {
                  title: "操作员一",
                  expand: true,
                  permissions: [
                    { value: "p1_2_1_view", text: "浏览", checked: true}
                  ],
                },
                {
                  title: "操作员二",
                  expand: true,
                  permissions: [
                    { value: "p1_2_2_view", text: "浏览", checked: true}
                  ],
                }
              ]
            }
          ]
        }
      ],
      buttonProps: {
        type: "default",
        size: "small"
      }
    };
  },
  methods: {
    renderContent(h, { root, node, data }) {
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%"
          },
          class: "permission-tree-node"
        },
        [
          h("span", [
            h("Icon", {
              props: {
                type: "ios-paper-outline"
              },
              style: {
                marginRight: "8px"
              }
            }),
            h("span", data.title)
          ]),
          h(
            "span",
            {
              style: {
                display: "inline-block",
                float: "right",
                marginRight: "32px"
              }
            },
            [
              h(
                "CheckboxGroup",
                {
                  props: {
                    value: this.selectedPermissions,
                    disabled: true
                  },
                  on: {
                    "on-change": (event) => {
                      this.selectedPermissions = event;
                      this.checkedItem = data.permissions;
                      console.log("event:", event);
                    }
                  }
                },
                (data.permissions || []).map(obj => {
                  return h(
                    "Checkbox",{
                      props: {
                        label: obj.value,
                        // disabled: obj.checked
                      }
                    },
                    obj.text
                  );
                })
              )
            ]
          )
        ]
      );
    },
    append(data) {
      const children = data.children || [];
      children.push({
        title: "appended node",
        expand: true
      });
      this.$set(data, "children", children);
    },
    remove(root, node, data) {
      const parentKey = root.find(el => el === node).parent;
      const parent = root.find(el => el.nodeKey === parentKey).node;
      const index = parent.children.indexOf(data);
      parent.children.splice(index, 1);
    }
  },
  watch:{
    selectedPermissions:function(newVal, oldVal){
      console.log('深度监听', newVal, oldVal, this.checkedItem);
      newVal.map(v=>{
        this.checkedItem.map(k=>{
          if ( v === k.value){
            k.checked = k.checked
          }
        })
      })
    },
    deep: true
  },
  created(){},
  mounted() {}
};
</script>
<style scoped>
.permission-tree-box ul.ivu-tree-children > li {
  margin: 0;
}
.permission-tree-node {
  padding: 10px 5px 10px 0;
  border-bottom: 1px solid #f6f6f6;
}
.permission-tree-node:hover {
  background-color: #f7f7f7;
}
>>>.ivu-checkbox-group{
  position: fixed;
  left: 400px;
}
</style>